<template>
<div>
  <el-page-header @back="goBack" content="详情页面"/>
  <h1>{{tourismInfo.tourismTitle}}</h1>
  <p>{{tourismInfo.tourismContents}}
  </p>
  <p>作者:{{tourismInfo.tourismAuthor}}</p>
  <p>发布时间:{{tourismInfo.createTime}}</p>
  <p>最后编辑时间:{{tourismInfo.lastEditTime}}</p>
  <div >
    <baidu-map :scroll-wheel-zoom="true">
      <bm-view class="map"></bm-view>
      <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    </baidu-map>
  </div>
</div>
</template>

<script>
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: 'aZqvisVkDQ6N84SFftUdkwVaZC7krxy4'
})
export default {
  name: "u_tourismInfo",
  data() {
    return {
      location: '',
      keyword: '旅游',
      tourismInfo:{
        tourismTitle: '',
        tourismContents: '',
        tourismAuthor:'',
        createTime: '',
      },
      tourismId: '',
    }
  },
  created() {
    this.tourismId = this.$route.query.tourismId;
    this.getInfo();
  },
  methods: {
    getInfo(){
      this.axios
          .get("/tourism/show/"+ this.tourismId)
          .then(res => {
            this.tourismInfo = res.data.data;
            this.location = res.data.data.tourismAddress;
          })

    },
    goBack() {
      window.history.back();
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 500px;
}
</style>